<template>
  <div id="questionList">
    <a-form :model="searchParams" layout="inline">
      <a-form-item field="title" label="标题">
        <a-input v-model="searchParams.title" placeholder="请输入标题" />
      </a-form-item>
      <a-form-item field="orTags" label="标签">
        <a-input-tag
          style="min-width: 200px"
          v-model="searchParams.orTags"
          placeholder="请输入标题"
        />
      </a-form-item>
      <a-form-item>
        <a-button type="primary" @click="doSearch()">搜索</a-button>
      </a-form-item>
      <a-form-item>
        <a-button @click="refresh()">重置</a-button>
      </a-form-item>
    </a-form>
    <a-table
      :data="list"
      style="margin-top: 30px"
      :pagination="{
        pageSize: searchParams.pageSize,
        current: searchParams.current,
        showTotal: true,
        total,
      }"
      @page-change="doPageChange"
    >
      <template #columns>
        <a-table-column title="编号">
          <template #cell="{ rowIndex }">
            {{ rowIndex + 1 }}
          </template>
        </a-table-column>
        <a-table-column title="标题" data-index="title"></a-table-column>
        <a-table-column title="标签列表" data-index="tags">
          <template #cell="{ record }">
            <a-tag v-for="(tag, index) of record.tags" :key="index" color="blue"
              >{{ tag }}
            </a-tag>
          </template>
        </a-table-column>

        <a-table-column title="通过率">
          <template #cell="{ record }">
            {{
              (record.submitNum == "0"
                ? "0"
                : record.acceptedNum / record.submitNum) +
              "% (" +
              record.submitNum +
              "/" +
              record.acceptedNum +
              ")"
            }}
          </template>
        </a-table-column>
        <a-table-column title="创建时间">
          <template #cell="{ record }">
            {{ moment(record.createTime).format("yyyy-MM-DD") }}
          </template>
        </a-table-column>

        <a-table-column title="操作" align="center">
          <template #cell="{ record }">
            <a-button type="primary" @click="toDoQuestion(record)"
              >做题
            </a-button>
          </template>
        </a-table-column>
      </template>
    </a-table>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { QuestionControllerService } from "../../../generated";
import { Message } from "@arco-design/web-vue";
import { useRouter } from "vue-router";
import moment from "moment";

const searchParams = ref({
  pageSize: 5,
  current: 1,
  title: "",
  orTags: [],
});

const doPageChange = (page: number) => {
  searchParams.value = {
    ...searchParams.value,
    current: page,
  };
};

const router = useRouter();

let list = ref([
  {
    title: "",
    content: "",
    tags: [],
    answer: "",
    judgeCase: [
      {
        inputCase: "",
        outputCase: "",
      },
    ],
    judgeConfig: {
      timeLimit: "",
      stackLimit: "",
      memoryLimit: "",
    },
  },
]);

let total = ref(0);

const columns = [
  {
    title: "编号",
    dataIndex: "id",
  },
  {
    title: "标题",
    dataIndex: "title",
  },
  {
    title: "标签列表",
    slotName: "tagsList",
  },
  {
    title: "题目提交数",
    dataIndex: "submitNum",
  },
  {
    title: "题目通过数",
    dataIndex: "acceptedNum",
  },
  {
    title: "创建时间",
    dataIndex: "createTime",
  },
  {
    title: "操作",
    slotName: "optional",
  },
];

const doSearch = () => {
  searchParams.value = {
    ...searchParams.value,
    current: 1,
    pageSize: 5,
  };
  getAllData();
};

const refresh = () => {
  searchParams.value = {
    pageSize: 5,
    current: 1,
    title: "",
    orTags: [],
  };
  getAllData();
};

const getAllData = async () => {
  let res = await QuestionControllerService.listQuestionVoByPageUsingPost(
    searchParams.value as any
  );
  if (res.code === 0) {
    total.value = res.data.total;
    list.value = res.data.records.map((t: any) => {
      t.judgeConfig = JSON.stringify(t.judgeConfig);
      return t;
    });
  } else {
    Message.error("获取失败：" + res.message);
  }
};

onMounted(async () => {
  getAllData();
});

const toDoQuestion = (record: any) => {
  router.push({
    path: `/do/question/${record.id}`,
  });
};
</script>

<style scoped>
#questionList {
  padding: 20px;
}
</style>
